精通 CSS @starting-style：定义动画初始状态

在动态的 Web 开发世界中，动画在增强用户体验、提供视觉反馈和引导用户交互方面扮演着至关重要的角色。虽然 CSS 动画和过渡已经有了长足的发展，但精确控制动画的初始状态，尤其是在由用户交互或状态变化触发时，常常带来一些微妙的挑战。现在，@starting-style at-rule 出现了，这是一个强大的 CSS 功能，旨在优雅地解决这个问题。

理解挑战：动画的第一帧

传统上，当动画或过渡应用于元素时，其初始状态由动画/过渡开始那一刻元素的当前计算样式决定。这可能导致意外的视觉跳跃或不一致，特别是在以下场景中：

• 页面间导航：当组件在新页面上以动画形式进入时，如果处理不当，其初始样式可能与预期不符。
• 在悬停或聚焦时触发动画：在动画平滑接管之前，元素可能会出现短暂的样式闪烁或变化。
• 通过 JavaScript 应用的动画：如果 JavaScript 动态添加一个触发动画的类，那么在添加该类之前元素的状态会影响动画的开始。
• 涉及 display: none 或 visibility: hidden 的动画：最初未渲染的元素在变得可见之前无法参与动画，导致突然出现而非平滑进入。

考虑一个简单的例子：你希望一个元素淡入并放大。如果元素最初的样式是 opacity: 0 和 transform: scale(0.5)，然后应用一个目标为 opacity: 1 和 transform: scale(1) 的 CSS 动画，动画会从其当前状态（不可见且缩小）开始，这符合预期。但是，如果元素最初的样式是 opacity: 1 和 transform: scale(1)，而应用的动画应该从 opacity: 0 和 scale(0.5) 开始呢？如果没有 @starting-style，动画将从元素现有的 opacity: 1 和 scale(1) 开始，实际上跳过了预期的起点。

@starting-style 简介：解决方案

@starting-style at-rule 提供了一种声明式的方式，用于定义当元素首次被引入文档或进入新状态时应用于其上的 CSS 动画和过渡的初始值。它允许您指定一组动画将以此开始的样式，而与元素创建时或过渡开始时的默认样式无关。

当与以下特性结合使用时，它尤其强大：

• @keyframes 动画：为那些可能不从 0%（或 from）开始的动画定义初始状态。
• CSS 过渡：确保从非过渡状态到过渡开始的平滑过渡。

@starting-style 如何与 @keyframes 协同工作

当您将 @starting-style 与 @keyframes 动画一起使用时，您可以指定在动画的第一个关键帧（通常是 0% 或 from 关键帧）生效之前应该应用的样式。这对于那些需要从“不可见”或“折叠”状态开始，但元素本身可能以默认可见样式渲染的动画特别有用。

其语法非常直观：

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

在这个例子中，.my-element 意图是淡出并缩小。如果它最初以 opacity: 1 和 transform: scale(1) 渲染，那么从 from { opacity: 1; transform: scale(1); } 开始的动画会显得是瞬时的，因为它已经处于“from”状态。然而，通过使用 @starting-style，我们明确地告诉浏览器：

• 当此动画开始时，元素应在视觉上准备好 opacity: 0。
• 并且其 transform 应为 scale(0.5)。

这确保了即使元素的自然状态不同，动画也能正确地从指定的起始值开始其序列。浏览器有效地应用这些 @starting-style 的值，然后从这些值开始 from 关键帧，并继续到 to 关键帧。如果动画设置为 forwards，则动画完成后将保持 to 关键帧的最终状态。

@starting-style 如何与过渡协同工作

当 CSS 过渡应用于元素时，它会在过渡发生前的元素样式和过渡发生后的样式之间平滑地插值。挑战在于，当触发过渡的状态是动态添加的，或者您希望过渡从一个不是元素默认渲染状态的特定点开始时。

考虑一个在悬停时放大的按钮。默认情况下，过渡会从按钮的非悬停状态平滑地移动到其悬停状态。

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

这工作得很好。过渡从按钮默认的 transform: scale(1) 开始，到 transform: scale(1.1)。

现在，想象一下您希望按钮以放大效果进入，然后在悬停时进一步放大。如果按钮最初以其完整尺寸出现，悬停过渡就很直接。但如果按钮是使用淡入和放大动画出现的，并且您希望悬停效果也是从其当前状态而不是其原始状态平滑放大呢？

这就是 @starting-style 变得无价的地方。它让您定义一个过渡的初始状态，当该过渡应用于首次渲染的元素时（例如，当组件通过 JavaScript 或页面加载进入 DOM 时）。

假设您有一个元素，它应该淡入并放大到视图中，然后在悬停时进一步放大。您可以使用动画来实现进入效果，然后用过渡来实现悬停效果：

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

在这种情况下，@starting-style 规则确保元素以 opacity: 0 和 transform: scale(0.8) 开始渲染，这与 fadeInScale 动画的 from 关键帧相匹配。一旦动画完成，元素稳定在 opacity: 1 和 transform: scale(1)，悬停效果的过渡就会从这个状态平滑地插值到 transform: scale(1.1)。这里的 @starting-style 特别影响动画的初始应用，确保它从期望的视觉点开始。

至关重要的是，@starting-style 适用于应用于新插入到文档中的元素的过渡。如果一个元素已经存在，并且其样式更改为包含过渡属性，@starting-style 不会直接影响该特定过渡的开始，除非该元素也正在被重新渲染。

浏览器支持与实现

@starting-style at-rule 是 CSS 规范中一个相对较新的补充。截至其广泛采用时：

• Chrome 和 Edge 具有出色的支持。
• Firefox 具有良好的支持。
• Safari 也提供了良好的支持。

始终建议查看 Can I Use 获取最新的浏览器兼容性信息。对于不支持 @starting-style 的浏览器，动画或过渡将简单地回退到调用时元素的现有计算样式，这可能会导致前面描述的不太理想的行为。

最佳实践和高级用法

1. 一致性是关键

使用 @starting-style 来确保动画和过渡始终如一地开始，无论元素是如何被引入 DOM 或其初始计算样式可能是什么。这有助于提供更可预测和更精致的用户体验。

2. 整理你的关键帧

与其在每个需要它的动画的 from 关键帧中添加初始状态（例如 opacity: 0），您可以在 @starting-style 中定义一次。这使您的 @keyframes 规则更清晰，更专注于动画的核心进程。

3. 处理复杂的状态变化

对于经历多种状态变化或动画的组件，@starting-style 可以帮助管理元素在添加或更新时的初始外观。例如，在单页应用程序（SPA）中，组件频繁挂载和卸载，使用 @starting-style 定义进入动画的起始样式可确保平滑的外观。

4. 性能考量

虽然 @starting-style 本身不会对性能产生固有影响，但它控制的动画和过渡会。始终努力为浏览器可以高效处理的属性制作动画，例如 transform 和 opacity。如果可能，避免为 width、height 或 margin 等属性制作动画，因为这些会触发昂贵的布局重新计算。

5. 为旧版浏览器提供后备方案

为了确保在不支持 @starting-style 的浏览器上的用户有合理的体验，您可以提供后备样式。这些是元素自然的初始样式，动画本应从这些样式开始。在许多情况下，如果没有 @starting-style 的默认行为，如果动画简单，可能也是可以接受的。

对于更复杂的场景，您可能需要使用 JavaScript 来检测浏览器支持或应用特定的初始样式。然而，@starting-style 的目标是减少对此类 JavaScript 干预的需求。

6. 全球化与本地化

在为全球受众开发时，动画应该是包容性的，不应依赖于特定国家的视觉提示。@starting-style at-rule 是一项技术性的 CSS 功能，其操作独立于文化背景。它的价值在于为动画提供一个一致的技术基础，然后可以以文化敏感的方式进行样式化和应用。确保在不同设备和网络条件下动画的平滑性是 Web 开发人员的普遍目标，而 @starting-style 有助于实现这种一致性。

示例场景：作品集卡片动画

让我们用一个常见的网页设计模式来说明：一个作品集网格，其中每张卡片都以微小的延迟和缩放效果动画进入视图。

目标：每张卡片应从 0.9 淡入并放大到 1，并且在网格中出现时，每张卡片都应应用轻微的延迟。

HTML:

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS:

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

解释：

1. .portfolio-item 元素最初设置为 opacity: 0 和 transform: scale(0.9)。这是它们在应用动画之前的状态。
2. @keyframes fadeInUpScale 定义了从 0%（实际上是动画进程的起始状态）到 100% 的动画。
3. @starting-style 规则明确声明，当应用 fadeInUpScale 动画时，它应以 opacity: 0 和 transform: scale(0.9) 开始。这确保了即使默认样式以某种方式改变，动画仍会从这个定义的点开始。
4. animation-delay 属性使用 :nth-child 选择器应用于每个子元素，以错开卡片的出现时间，创造出更具视觉吸引力的序列。
5. forwards 关键字确保元素在动画结束后保留最后一个关键帧的样式。

如果没有 @starting-style，如果浏览器没有正确地将 .portfolio-item 的初始计算样式解释为动画的起点，动画可能会从一个不同的、非预期的状态开始。@starting-style 保证了动画能正确地从预期的值开始其序列。

结论

@starting-style at-rule 是 CSS 动画和过渡领域的一项重大进步。它使开发人员能够更精确地控制动画元素的初始状态，从而实现更平滑、更可预测和专业精致的用户界面。通过理解和实施 @starting-style，您可以将您的 Web 动画从优秀提升到卓越，确保为您的全球受众在各种设备和浏览器上提供一致且引人入胜的体验。拥抱这个强大的工具，打造真正吸引用户的惊艳动画网页体验。